<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
        #body{
            margin: auto;
            height: 300px;
            width: 400px;
        }
    </style>
    <script>

        $(function () {
            $("#nameId").blur(function () {
                var name = $(this).val();
                //发送异步请求后端,判断数据库是否有这个名字
                var $message = $("#message");
                $.post("findNameServlet",{"name":name},function (data) {
                    //{message:可使用} 存在
                    //{message:不可用} 不存在
                    if (data.message == "可使用"){
                        //可使用
                        $message.html("可使用");
                        $message.css("color","green")
                    }else {
                        //不可用
                        $message.html("不可用");
                        $message.css("color","red")
                        $(this).focus();
                    }

                },"json");

            });

            $("#inputSuccess3").blur(function () {
                //校验密码格式
            });

            /*
            不使用表单提交,改为,ajax异步请求
             */
            $("#btn").click(function () {
                //提交表单,检验名字是否可用
                if ($("#message").html()=="可使用"){
                    var nameId = $("#nameId").val();
                    var pwdId = $("#pwdId").val();
                    var emailText = $("#emailText").val();
                    $.post("registerServlet",{"nameID":nameId,"pwd":pwdId,"email":emailText},function (data) {

                    },"json");

                }else {
                    //名字不可使用
                }
            });


        });

    </script>
</head>
<body>
    <div id="body">
        <form method="post" id="fromRe">
            名字:<input type="text" id="nameId" name="nameID">
            <span id="message" ></span>
            <br>
            pad:<input type="password" id="pwdId" name="pwd">
            <br>
            email:<input type="email" name="email" id="emailText">
            <input type="submit" value="注册" id="btn">
            <br>
            <div id="msg"></div>
        </form>
    </div>

</body>
</html>